<template>
  <div class="print-page">
    <div class="right-btn">
      <el-button
        type="plain"
        class="btn-text-blue"
        icon="el-icon-printer"
        size="mini"
        @click="print()"
        >打印</el-button
      >
    </div>
    <div class="sign-table--box" ref="sign-table--box">
      <table class="sign-table" border="1" cellspacing="0" cellpadding="10">
        <tr
          class="sign-table-title"
          style="text-align: center; font-size: 32px; line-height: 72px"
        >
          <td colspan="6">
            <div class="tableTitle">{{ title }}</div>
          </td>
        </tr>
        <tr class="sign-table--item" style="line-height: 48px">
          <template>
            <th width="15%" align="center">设备编号</th>
            <td
              width="35%"
              align="center"
            >
              {{ basicData.equipmentCode }}
            </td>
            <th width="15%" align="center">设备名称</th>
            <td
              width="35%"
              align="center"
            >
              {{ basicData.equipmentName }}
            </td>
          </template>
        </tr>
        <tr class="sign-table--item" style="line-height: 48px">
          <template>
            <th width="15%" align="center">制造厂家</th>
            <td
              width="35%"
              align="center"
            >
              {{ basicData.equipmentCode }}
            </td>
            <th width="15%" align="center">此次报修时间</th>
            <td
              width="35%"
              align="center"
            >
              {{ basicData.equipmentName }}
            </td>
          </template>
        </tr>
        <tr class="sign-table--item" style="line-height: 48px"></tr>
        <tr class="sign-table--item" style="line-height: 48px">
          <th width="15%" align="center" valign="middle">报修原因</th>
          <td colspan="5">
            <div
              class="w100"
              style="
                text-align: left;
                padding: 10px 20px;
                white-space: pre-wrap;
              "
            >
              {{ basicData.reason }}
            </div>
            <div
              class="w100"
              style="
                line-height: 30px;
                display: inline-flex;
                justify-content: space-between;
              "
            >
              <div class="sign-name" style="width: 30%">
                <span style="text-align: left; padding: 10px 20px"
                  >报修单位负责人:
                  {{ basicData.leaderName || "\u3000\u3000" }}</span
                >
              </div>
              <div
                class="sign-date"
                style="
                  width: 50%;
                  display: inline-flex;
                  justify-content: flex-end;
                  padding-right: 30px;
                "
              >
                <div class="sign-date-year" style="width: 20%">
                  <span class="text-align-right" style="text-align: right"
                    >报修人{{ basicData.createName }}</span
                  >
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td
            class="accept"
            colspan="6"
            style="disPaly:flex;"
          >
            <div class="sign-name" style="flex:1">
              <span style="text-align: left; padding: 10px 20px"
                >报修单位负责人:
                {{ basicData.leaderName || "\u3000\u3000" }}</span
              >
            </div>
            <div
              class="sign-date"
              style="flex:1"
            >
              <div class="sign-date-year" style="width: 20%">
                <span class="text-align-right" style="text-align: right"
                  >报修人:{{ basicData.createName }}</span
                >
              </div>
            </div>
          </td>
        </tr>
        <tr class="sign-table--item" style="line-height: 48px">
          <th align="center" valign="middle">修理原因</th>
          <td colspan="5">
            <div
              class="w100"
              style="
                text-align: left;
                padding: 10px 20px;
                white-space: pre-wrap;
              "
            >
              {{ basicData.content }}
            </div>
          </td>
        </tr>
        <tr>
          <td
            class="accept"
            colspan="6"
          >
            <div>
              <span style="text-align: left; padding: 10px 20px"
                >维修质量是否合格(报修单位负责人签字):
                {{ basicData.acceptName }}</span
              >
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { getWorkflowHistory } from "@/api/common.js";
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {},
  data() {
    return {
      basicData: {},
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      this.basicData = JSON.parse(JSON.stringify(this.formData));
      //this.basicData.mark = "1、高级工程师\n 2、先进工作个体";
    },
    operationDate(data, type) {
      let returnData = "";
      if (data) {
        if (type == "year") {
          returnData = data.substring(0, 4);
        }
        if (type == "month") {
          returnData = data.substring(5, 7);
        }
        if (type == "day") {
          returnData = data.substring(8, 10);
        }
      }
      return returnData;
    },
    print() {
      this.$print(this.$refs["sign-table--box"]);
    },
  },
};
</script>

<style type="text/css">
/* 去掉打印页面的页眉页脚 */
@page {
  size: auto A4 landscape;
  /* margin: 3mm; */
  margin: 0 3mm;
}
.sign-table--box {
  position: relative;
}
.sign-table {
  width: 90%;
  min-width: 500px;
  margin: 10px auto;
}
.sign-table .sign-table--item td {
  line-height: 48px;
}
.sign-table-title {
  /* font-size: 32px;
    text-align: center;
		line-height: 72px; */
}
.font-bold {
  font-weight: bold;
}
.top_left {
  font-size: 16px;
  margin: 10px auto;
}
.signBtn {
  /* background-color: #1f69e0 ; */
  color: #1f69e0;
  border-color: #1f69e0;
  height: 30px;
  padding: 0px 20px;
}
.btnLine {
  padding: 10px;
  margin-right: 95px;
  float: right;
}
.userItem + .userItem {
  margin-left: 20px;
}
.right-btn {
  position: relative;
  text-align: right;
  margin-right: 60px;
}
.opinion-text {
  /* min-height: 78px; */
  text-align: left;
  padding: 10px 20px;
}
.accept{
  height: 48px;
  line-height: 48px;
  border: 1px solid black;
}

</style>
